<template>
  <div class="admin_index">
    <div class="header">
      <div class="icon"></div>
      <div class="title">
        <h1>轻语后台管理系统</h1>
      </div>
      <div class="user">
        <img src="https://cdn.jsdelivr.net/gh/flyono/Chart-bed@main/img/wallhaven-85x3ej_1280x1024.png" alt="">
        <lay-icon type="layui-icon-logout"
                  color="#FF5722"
                  size="32px"
                  class="logout"
                  @click="Logout"
        ></lay-icon>
      </div>
    </div>
    <div class="main">
      <div class="side">
        <ul>
          <li><span @click="ToUser">用户管理</span></li>
          <li><span @click="ToPost">文章管理</span></li>
          <li><span>数据统计</span></li>
        </ul>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter()
const ToUser = () => {
  router.push('/admin/user')
}
const ToPost = () => {
  router.push('/admin/post')
}

const Logout = () => {
  router.push('/admin/login')
}
</script>

<style scoped>
.admin_index {
  width: 100vw;
  height: 100vh;
}

.header {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #435585;
}

.icon {
  width: 100px;
  height: 100px;
  background: url("public/OIG.png");
  background-size: 100px 100px;
}

.title {
  display: flex;
  flex-direction: column;
  font-size: 24px;
  font-family: "Microsoft YaHei", serif;
}

.user {
  width: 120px;
  height: 80px;
}

.user img {
  width: 32px;
  height: 32px;
  position: relative;
  top: 18px;
}

.main {
  height: 90%;
  display: flex;
}

.main .side {
  width: 150px;
  height: 100%;
  background-color: #818FB4;
}

.side ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}

.side ul li {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 18px;
  font-family: "Microsoft YaHei", serif;
  color: #fff;
  cursor: pointer;
}

.side ul li span {
  display: inline-block;
  margin-top: 20px;
  width: 80%;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
}

.side ul li span:hover {
  background-color: #F5E8C7;
  color: #435585;
}

.content {
  width: 100%;
}

.logout {
  position: relative;
  top: 25px;
  left: 30px;
}
.logout:hover {
  cursor: pointer;
}
</style>